<template>
  <div>
    <TableHead />

    <a-table
      :loading="detailData.loading"
      :data="detailData.data"
      :bordered="false"
      class="table-container"
      :columns="translateColumns(columns.columns)"
      :pagination="{
        total: detailQuery.total,
        pageSize: detailQuery.pageSize,
        current: detailQuery.pageNum
      }"
      @page-size-change="pageSizeChange"
      @page-change="pageChange"
    >
      <template #triggerType="{ record }">
        {{
          getOptionLabel({
            options: triggerTypeOptions,
            value: record.triggerType
          })
        }}
      </template>
      <template #status="{ record }">
        {{ t[getQueueStatus(record.status).text] }}
      </template>
      <template #goodsName="{ record }">
        <a-link @click="detail(record.goodsName)">
          {{ record.goodsName }}
        </a-link>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { getOptionLabel } from "@/utils/form";

import router from "@/router";
import columns from "../data/detail.column";
import { triggerTypeOptions } from "../data/options";

import { getQueueStatus } from "@/data/options/status";
import TableHead from "./TableHead.vue";
import { detailData, detailQuery, listDetail } from "./data";

const t = translate("公共模块");
const pageChange = (page: number) => {
  detailQuery.value.pageNum = page;
  listDetail();
};
const detail = (name: string) => {
  router.push({
    path: `/price-change-record`,
    query: {
      name
    }
  });
};
const pageSizeChange = (pageSize: number) => {
  detailQuery.value.pageNum = pageSize;
  listDetail();
};
</script>

<style lang="scss" scoped></style>
